<script setup>
    import axios from "@/axios/index.js";
    import {Plus} from "@element-plus/icons-vue";
    import {defineEmits, defineModel} from "@vue/runtime-core";
    import {reactive, ref} from "vue";
    import {ElMessage} from "element-plus";

    let updateStateDialog = defineModel('updateStateDialog')
    let isPermissions = defineModel('isPermissions')
    const emit = defineEmits(['loadTableData'])
    const formRef = ref()

    let props = defineProps(['rowData'])
    let formData = reactive({
        className:props.rowData.className,
        endDate:props.rowData.endDate
    })


    // 表单引用
    const ruleFormRef = ref();
    //保存数据
    function save() {

      console.log(isPermissions.value)

      if (isPermissions.value === 0){
        ElMessage({
          message: '无权操作',
          type: 'warning',
        })
        return;
      }

      if (!ruleFormRef.value) return;
      ruleFormRef.value.validate((valid) => {
        if (valid) {
          //console.log(formData)
          axios.post('/api/v1/class/updateClassStatus', formData, {
            params: {
              id: props.rowData.id,
            }
          }).then(resp => {
            ElMessage({
              message: "结业操作成功",
              type: 'success',
              duration: 1500,
              onClose: function () {
                emit('loadTableData')
                updateStateDialog.value = false
                //清除表单数据
                formData = {}
                // 刷新页面
                location.reload();
              }
            })
          })
        } else {
          ElMessage.error("请检查表单填写是否正确");
        }
      });
    }
    //重置表单校验
    const rules = reactive({
      endDate: [
        { required: true, message: '请选择结业日期', trigger: 'blur' },]
    });
</script>

<template>
    <el-dialog v-model="updateStateDialog" title="结业" width="450" height="550">
        <el-form :inline="true" label-width="auto" class="demo-form-inline" :model="formData" :rules="rules"  ref="ruleFormRef">
            <el-form-item label="班级名" label-width="80" style="width: 276px" >
                <el-input placeholder="输入班级名称" autocomplete="off" v-model="formData.className" disabled/>
            </el-form-item>
            <el-form-item label="结业日期" label-width="80" prop="endDate">
                <el-date-picker
                        autocomplete="off"
                        v-model="formData.endDate"
                        type="date" placeholder="选择日期"
                        size="default"
                        :editable="false"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="updateStateDialog = false">关闭</el-button>
                <el-button @click="save(formRef)" type="primary">保存</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style scoped>
    .demo-form-inline{
        margin-left: 30px;
        text-align: center;
    }
    .demo-form-inline el-input{
        --el-input-width: 250px;
    }
    .demo-form-inline el-radio-group{
        --el-input-width: 250px;
    }
    .demo-form-inline el-date-picker{
        --el-input-width: 250px;
    }
</style>